在文章〈關卡〇：新手入門之說聲 Hello World〉，我們看到了 HTML、CSS、JavaScript 如何組合成一個網頁。不過 HTML 究竟是什麼、以及在 Hello World 網頁中的兩行 HTML 語法到底是什麼意思？這篇文章將逐一介紹。

<div>Hello World!</div>
<button onclick="alertSomething()">Click Me</button>

一、HTML 是啥

如果將網頁比喻成房屋的話，那 HTML 就是網頁的骨架與內容物。

HTML 是一種標記語言（HyperText Markup Language，超文本標記語言），它用尖括號對 <></> 作為標記用的符號。例如 Hello World 範例中的兩行 HTML 語法，都是一個一個的尖括號對。而在 HTML 中，我們會將 <></> 這樣的尖括號對，稱為是標籤 (tag)。

當瀏覽器讀取 HTML 檔案時，會從上往下開始讀取 HTML 語法。然後瀏覽器會開始將 tag 渲染成畫面並組合在一起，最後就變成我們看到的網頁。

在關卡〇，我們只需要先知道 HTML 這個語言，是由 tag 組成就好。

延伸教學

• HTML 基礎教學，建立屬於自己的網頁 #HTML - YouTube
• 【html】1小時初學者教學 #html #html教學 #html入門 - YouTube
• HTML 是什麼 | 基礎教學 | 為什麼你該學HTML - YouTube

二、Hello World 範例中，這兩行 HTML 語法的意思

<div>Hello World!</div>

如前面所述，這是一個 HTML 標籤。每個 HTML 標籤都有不同的意義。例如這邊的 div 其實是 division 的縮寫。division 有區分、分隔的意思，而 <div> 也是類似的功能，就是將被標籤對包裹起來的內容，跟其他外面的標籤區隔的意思。

最後這段 HTML 標籤，會顯示 Hello World 這段文字。

<button onclick="alertSomething()">Click Me</button>

如前面所述，這也是一個 HTML 標籤。當瀏覽器讀取到 <button></button> 標籤後，就會在網頁上渲染出一個按鈕。 onclick="alertSomething() 的意思是，當點擊這顆按鈕時，就會去執行 alertSomething() 這個行為。

最後這段 HTML 標籤，會顯示一個寫著 Click Me 的按鈕。點擊按鈕會執行 alertSomething() 的行為。

小結

看完今天的文章可以知道

• HTML 的簡介：HTML 檔案由 tag 組成
• 在 Hello World 範例中的 HTML 語法意思 (div, button)

明天將繼續簡介 CSS。